<template>
  <div style="padding-bottom: 100px;overflow-y:auto;overflow-x:hidden;">
    <el-form :ref="submitFormRef" class="submit-form" :model="ruleForm" :rules="rules" label-position="top">
      <el-row :gutter="10">
        <el-col v-for="item in formList" :key="item.key" :span="item.colSpan || 24">
          <h2 v-if="item.name === 'title'">{{ item.label }}</h2>
          <el-form-item v-else :prop="item.key" :label="item.label">
            <el-select v-if="item.name === 'select'" v-model="ruleForm[item.key]" :disabled="disabled || item.disabled" :multiple="item.multiple" clearable @change="(val) => defaultChange(item.key, val)">
              <el-option
                v-for="optionItem in item.options"
                :key="optionItem.value"
                :value="optionItem.value"
                :label="optionItem.name"
              />
            </el-select>
            <el-radio-group v-if="item.name === 'radio'" v-model="ruleForm[item.key]" :disabled="disabled || item.disabled" clearable @change="(val) => defaultChange(item.key, val)">
              <el-radio
                v-for="optionItem in item.options"
                :key="optionItem.value"
                :label="optionItem.value"
              >{{ optionItem.name }}</el-radio>
            </el-radio-group>
            <el-switch v-if="item.name === 'switch'" v-model="ruleForm[item.key]" :disabled="disabled || item.disabled" :active-value="item.activeValue" :inactive-value="item.inactiveValue" @change="(val) => defaultChange(item.key, val)" />

            <el-input v-if="item.name === 'input'" v-model="ruleForm[item.key]" :disabled="disabled || item.disabled" :rows="item.rows || 5" placeholder="请输入" :type="item.type || 'text'" @change="(val) => defaultChange(item.key, val)" />
            <el-input-number v-if="item.name === 'el-input-number'" v-model="ruleForm[item.key]" :step="1" :precision="0" :disabled="disabled || item.disabled" :rows="item.rows || 5" placeholder="请输入" @change="(val) => defaultChange(item.key, val)" />

            <el-date-picker
              v-if="item.name === 'datetime'"
              v-model="ruleForm[item.key]"
              :disabled="disabled || item.disabled"
              :type="item.dateType"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
              @change="(val) => defaultChange(item.key, val)"
            />
            <FileUpload v-if="item.name === 'file'" v-model="ruleForm[item.key]" :multiple="item.multiple" />
            <RichEditor v-if="item.name === 'rich'" v-model="ruleForm[item.key]" />
            <slot :name="item.key" />
          </el-form-item>
        </el-col>
        <slot />
      </el-row>
    </el-form>
    <slot name="footer">
      <div style="text-align: right;position:absolute;right: 40px;bottom: 30px;width: 100%">
        <el-button type="primary" @click="onSave">提交</el-button>
        <el-button v-if="showClose" @click="onClose">取消</el-button>
      </div>
    </slot>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'SubmitForm',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    formList: {
      type: Array,
      default: () => []
    },
    ruleForm: {
      type: Object,
      default: () => {}
    },
    rules: {
      type: Object,
      default: () => {}
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      submitFormRef: ''
    }
  },
  created() {
    this.submitFormRef = 'submitFormRef' + uuidv4()
  },
  methods: {
    onSave() {
      this.$refs[this.submitFormRef].validate(valid => {
        if (valid) {
          this.$emit('save', this.ruleForm)
        } else {
          this.$message.error('表单填写不规范，请检查')
        }
      })
    },
    onClose() {
      this.$emit('close')
    },
    defaultChange(key, val) {
      this.$emit('change', { key, val })
    }
  }
}
</script>

<style lang="scss">
.submit-form {
    .el-form-item__content {
       .el-select {
           width: 100%;
       }
    }
}
</style>
